<template>
  <div class="top-statictis">
    <!-- <div style="font-size: 12px; width: 100%" class="common-text">数据统计时间：{{ $setTime(new Date()) }}</div> -->
    <div class="flex" style="padding-top: 5px">
      <div class="item">
        <div class="top">待接单任务数</div>
        <div class="num">{{ countNumInfo.waitAcceptNum ? countNumInfo.waitAcceptNum : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">收样中任务数</div>
        <div class="num">{{ countNumInfo.sendingSampleNum ? countNumInfo.sendingSampleNum : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">待排期任务数</div>
        <div class="num">{{ countNumInfo.waitScheduleNum ? countNumInfo.waitScheduleNum : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">执行中任务数</div>
        <div class="num">{{ countNumInfo.executingNum ? countNumInfo.executingNum : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">待验收任务数</div>
        <div class="num">{{ countNumInfo.waiteVerifyNum ? countNumInfo.waiteVerifyNum : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">已完成任务数</div>
        <div class="num">{{ countNumInfo.finishedNum ? countNumInfo.finishedNum : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">已完成任务金额</div>
        <div class="num">￥{{ countNumInfo.amtbFinishCost ? countNumInfo.amtbFinishCost : '0' }}</div>
      </div>
      <div class="item">
        <div class="top">延期任务数</div>
        <div class="num">{{ countNumInfo.deferredNum ? countNumInfo.deferredNum : '0' }}</div>
      </div>
    </div>
  </div>
  <a-tabs v-model:active-key="cur" size="mini" style="margin-top: 5px">
    <a-tab-pane key="1" title="已完成任务明细">
      <all v-if="cur == '1'" />
    </a-tab-pane>
    <a-tab-pane key="2" title="按成员汇总已完成任务">
      <user v-if="cur == '2'" />
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { countTask } from '@/api/task'
  import all from './components/all.vue'
  import user from './components/user.vue'
  let cur = ref('1')
  let countNumInfo: any = ref({})
  const getCountNum = async () => {
    let res = await countTask()
    countNumInfo.value = res?.data || {}
  }

  onMounted(() => {
    getCountNum()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: white;
  }

  .common-text {
    font-size: 12px;
    color: #a39999;
  }
  .top-statictis {
    width: 100%;
    height: 85px;
    background-color: white;
    padding: 5px;
    .item {
      width: 150px;
      height: 70px;
      margin-right: 10px;
      border: 1px solid #d7d7d7;
      padding: 5px;
      .top {
        color: #aaaaaa;
        font-size: 16px;
      }
      .num {
        margin-top: 5px;
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
</style>
